<template>
  <tr>
    <template v-if="to==='aliyun_rds'">
      <td>
        <input
          type="checkbox"
          v-model="checkShowArr[props.item.DBInstanceId]"
          @click="selectItemClick"
        />
      </td>
      <td class="font-blue">
        <a href="javascript:void(0)" class="font-blue f14">
          <span class="font-blue f11">{{ props.item.DBInstanceDescription || '-'}}</span>
          <br />
          <span class="font-gray f11">{{ props.item.DBInstanceId || '-'}}</span>
        </a>
      </td>
      <td class="font-gray2">
        <span class="font-blue f11">{{ props.item.user_name || '-' }}</span>
        <br />
        <span class="font-gray f11">{{ props.item.uid === 0 ? '0': props.item.uid || '-' }}</span>
      </td>
      <td class="font-gray2">
        <span class="font-blue f11">{{ props.item.department || '-'}}</span>
        <br />
        <span class="font-gray f11">{{ props.item.department_name || '-'}}</span>
      </td>
      <td class="font-gray2">
        <span v-if="!props.item.DBInstanceStatus">-</span>
        <span v-if="props.item.DBInstanceStatus ==='Creating'">创建中</span>
        <span class="font-green" v-if="props.item.DBInstanceStatus ==='Running'">使用中</span>
        <span v-if="props.item.DBInstanceStatus ==='Deleting'">删除中</span>
        <span v-if="props.item.DBInstanceStatus ==='Rebooting'">重启中</span>
        <span v-if="props.item.DBInstanceStatus ==='DBinstanceClassChanging'">升降级中</span>
        <span v-if="props.item.DBInstanceStatus ==='TRANSING'">迁移中</span>
        <span v-if="props.item.DBInstanceStatus ==='EngineVersionUpgrading'">迁移版本中</span>
        <span v-if="props.item.DBInstanceStatus ==='TransingToOthers'">迁移数据到其他RDS中</span>
        <span v-if="props.item.DBInstanceStatus ==='GuardDBInstanceCreating'">生产备灾中</span>
        <span v-if="props.item.DBInstanceStatus ==='Restoring'">备份恢复中</span>
        <span v-if="props.item.DBInstanceStatus ==='Importing'">数据导入中</span>
        <span v-if="props.item.DBInstanceStatus ==='ImportingFromOthers'">从其他RDS实例导入数据中</span>
        <span v-if="props.item.DBInstanceStatus ==='DBInstanceNetTypeChanging'">内外网切换中</span>
        <span v-if="props.item.DBInstanceStatus ==='GuardSwitching'">容灾切换中</span>
        <span v-if="props.item.DBInstanceStatus ==='INS_CLONING'">克隆中</span>
        <span v-if="props.item.DBInstanceStatus ==='Released'">已释放</span>
      </td>

      <td>
        <span v-if="!props.item.DBInstanceCPU">-</span>
        {{props.item.DBInstanceCPU}} 核 {{ props.item.DBInstanceMemory }} G
        <br />
        <span v-if="!props.item.DBInstanceClass">-</span>
        {{props.item.DBInstanceClass}}
      </td>
      <td class="font-gray2">
        <span v-if="!props.item.ip_address">-</span>
        {{props.item.ip_address}}
      </td>
      <td class="font-blue">
        <span class="font-blue f11">{{ props.item.Engine || '-'}}</span>
        <br />
        <span class="font-gray f11">{{ props.item.EngineVersion || '-'}}</span>
      </td>
      <td class="font-gray2">
        <span v-if="!props.item.DBInstanceStorage">-</span>
        {{props.item.DBInstanceStorage}} GB
      </td>
      <td class="font-gray2">{{props.item.CreateTime | dateFormat("yyyy-MM-dd HH:mm")}}</td>
    </template>
    <template v-if="to==='aliyun_ecs'">
      <td>
        <input
          type="checkbox"
          v-model="checkShowArr[props.item.instance_id]"
          @click="selectItemClick"
        />
      </td>
      <td>
        <a href="javascript:void(0)" class="font-blue">
          <span class="font-blue">{{ props.item.instance_name || '-'}}</span>
          <br />
          <span class="font-gray2">{{ props.item.instance_id || '-'}}</span>
        </a>
      </td>
      <td class="font-blue" v-if="props.item.status==='Padding'">创建中</td>
      <td class="font-green" v-if="props.item.status==='Running'">运行中</td>
      <td class="font-yellow" v-if="props.item.status==='Starting'">启动中</td>
      <td class="font-org" v-if="props.item.status==='Stopping'">停止中</td>
      <td class="font-red" v-if="props.item.status==='Stopped'">已停止</td>
      <td class="font-gray" v-if="!props.item.status">-</td>
      <td v-if=" props.item.instance_type">
        <span v-if=" props.item.cpu">{{ props.item.cpu }} 核 {{ props.item.memory }} G</span>
        <br />
        <span>{{ props.item.instance_type }}</span>
      </td>
      <td class="font-gray2" v-else>-</td>
      <td>
        <span class="font-blue">{{ props.item.dd || '-'}}</span>
        <br />
        <span class="font-gray2">{{ props.item.user_id || '-' }}</span>
      </td>
      <td>
        <span class="font-blue">{{ props.item.department_name || '-'}}</span>
        <br />
        <span class="font-gray2">{{ props.item.department || '-'}}</span>
      </td>
      <td>
        <span class="font-blue">{{ props.item.user_name || '-' }}</span>
        <br />
        <span class="font-gray2">{{ props.item.uid === 0 ? '0': props.item.uid || '-' }}</span>
      </td>

      <td class="font-gray2">{{ props.item.ip_address || '-' }}</td>
      <td class="font-gray2">{{ props.item.eip_address || '-' }}</td>

      <td class="font-gray2">{{ props.item.vpc_id || '-'}}</td>
      <td class="font-gray2">{{ props.item.security_group_id }}</td>
      <td>
        <span class="font-blue">{{ props.item.os_name || '-' }}</span>
        <br />
        <span class="font-gray2">{{ props.item.os_type || '-' }}</span>
      </td>
      <td class="font-gray2">{{props.item.creation_time | dateFormat("yyyy-MM-dd HH:mm")}}</td>
      <td class="font-gray2">{{ props.item.is_up === 1 ? '否':'是' }}</td>
      <td>
        <el-button
          size="mini"
          title="上报"
          type="default"
          disabled
          circle
          @click="operate(props.item)"
        >上报</el-button>
        <!-- <el-button
          v-if="params.status === 1"
          size="mini"
          title="撤销"
          type="default"
          circle
          @click="operate(props.item, params.status)"
        >撤销</el-button>
        <el-button
          v-if="props.item.uid && params.status === 3"
          size="mini"
          title="解绑"
          type="default"
          circle
          @click="bindServer(props.item, false)"
        >解绑</el-button>
        <el-button
          v-if="params.status === 3"
          size="mini"
          title="绑定"
          type="default"
          circle
          @click="bindServer(props.item, true)"
        >绑定</el-button>-->
      </td>
    </template>
    <template v-if="to==='aliyun_oss'">
      <td>
        <input type="checkbox" v-model="checkShowArr[props.item.Name]" @click="selectItemClick" />
      </td>
      <td class="font-blue">
        <a href="javascript:void(0)" class="font-blue f14">
          <span class="font-blue f11">{{ props.item.Name || '-'}}</span>
        </a>
      </td>
      <td class="font-gray2">
        <span class="font-blue f11">{{ props.item.department }}</span>
        <br />
        <span class="font-gray f11">{{ props.item.department_name }}</span>
      </td>
      <td class="font-gray2">
        <span class="font-blue f11">{{ props.item.user_name || '-'}}</span>
        <br />
        <span class="font-gray f11">{{ props.item.uid }}</span>
      </td>
      <td class="font-gray2">
        <span>{{ props.item.StorageClass || '-' }}</span>
      </td>
      <td class="font-gray2">
        <span>{{ props.item.StorageCapacity || '-' }} GB</span>
      </td>
      <td class="font-gray2">
        <span>{{props.item.Comment || '-'}}</span>
      </td>
      <td class="font-gray2">{{props.item.CreationDate | dateFormat("yyyy-MM-dd HH:mm")}}</td>
    </template>
    <template v-if="to==='aliyun_slb'">
      <td>
        <input
          type="checkbox"
          v-model="checkShowArr[props.item.LoadBalancerId]"
          @click="selectItemClick"
        />
      </td>
      <td class="font-blue">
        <a href="javascript:void(0)" class="font-blue f14">
          <span class="font-blue f11">{{ props.item.LoadBalancerName || '-'}}</span>
        </a>
      </td>
      <td class="font-gray2">
        <span class="font-blue f11">{{ props.item.department }}</span>
        <br />
        <span class="font-gray f11">{{ props.item.department_name }}</span>
      </td>
      <td class="font-gray2">
        <span class="font-blue f11">{{ props.item.user_name || '-'}}</span>
        <br />
        <span class="font-gray f11">{{ props.item.uid }}</span>
      </td>
      <td class="font-gray2">
        <span class="font-org">{{ props.item.LoadBalancerStatus || '-' }}</span>
      </td>
      <td class="font-gray2">
        <span>{{props.item.Address || '-'}}</span>
      </td>
      <td class="font-gray2">
        <span v-if="props.item.NetworkType === 'vpc'">专有网络实例</span>
        <span v-if="props.item.NetworkType === 'classic'">经典网络实例</span>
        <span v-if="!props.item.NetworkType"></span>
      </td>
      <td class="font-gray2">
        <span>{{props.item.VpcId || '-'}}</span>
      </td>
      <td class="font-gray2">{{props.item.CreationDate | dateFormat("yyyy-MM-dd HH:mm")}}</td>
    </template>
    <template v-if="to==='aliyun_redis'">
      <td class="font-gray2">
        <input
          type="checkbox"
          v-model="checkShowArr[props.item.InstanceId]"
          @click="selectItemClick"
        />
      </td>
      <td class="font-gray2">
        <a href="javascript:void(0)" class="font-blue">
          <span class="font-blue">{{ props.item.InstanceName || '-' }}</span>
          <br />
          <span class="font-gray">{{ props.item.InstanceId || '-' }}</span>
        </a>
      </td>
      <td class="font-gray2">{{ props.item.InstanceClass || '-' }}</td>
      <td class="font-gray2">
        <span class="font-blue">{{ props.item.department_name || '-' }}</span>
        <br />
        <span>{{ props.item.department || '-' }}</span>
      </td>
      <td class="font-gray2">{{ props.item.ArchitectureType || '-' }}</td>
      <td>
        <span v-if="props.item.Bandwidth">{{ props.item.Bandwidth }} MB/s</span>
        <span v-else>-</span>
      </td>
      <td>
        <span v-if="props.item.Capacity">{{ props.item.Capacity }} G</span>
        <span v-else>-</span>
      </td>
      <td>
        <span
          :class="'font-' + redisStatusColor[props.item.InstanceStatus]"
        >{{ props.item.InstanceStatus | statusRedis(redisStatus) }}</span>
      </td>

      <td class="font-gray2">{{ props.item.Connections || '-' }}</td>
      <td class="font-gray2">{{ props.item.CreateTime | dateFormat('yyyy-MM-dd') }}</td>
    </template>
  </tr>
</template>

<script>
export default {
  props: ["props", "to", "checkShowArr", "selectItem", "operate"],
  methods: {
    selectItemClick() {
      this.selectItem();
    }
  },
  data() {
    return {
      redisStatus: {
        Normal: "正常",
        Creating: "创建中",
        Changing: "修改中",
        Inactive: "被禁用",
        Flushing: "清除中",
        Released: "已释放",
        Transforming: "转换中",
        Unavailable: "服务停止",
        Error: "创建失败",
        Migrating: "迁移中",
        BackupRecovering: "备份恢复中",
        MinorVersionUpgrading: "小版本升级中",
        NetworkModifying: "网络变更中",
        SSLModifying: "SSL变更中",
        MajorVersionUpgrading: "大版本升级中，可正常访问"
      },
      redisStatusColor: {
        Normal: "green",
        Creating: "org",
        Changing: "org",
        Inactive: "gray2",
        Flushing: "org",
        Released: "gray2",
        Transforming: "org",
        Unavailable: "gray2",
        Error: "red",
        Migrating: "org",
        BackupRecovering: "org",
        MinorVersionUpgrading: "org",
        NetworkModifying: "org",
        SSLModifying: "org",
        MajorVersionUpgrading: "org"
      }
    };
  },
  filters: {
    statusRedis(key, data) {
      return data[key] || "-";
    }
  }
};
</script>

<style>
</style>